﻿<template>
  <div class="home" style="height: 100%;">
  	<!--面包屑-->
		<div class="breadcrumb">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>概览</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="content">
			<div class="mapWrapper wrapper">
				<div ref="map" style="height: 100%; width: 100%;" id="map">
					<div class="fullScreen" @click="fullScreen">
						<span v-show="isFullScreen">退出全屏</span>
						<span v-show="!isFullScreen"><i class="iconfont icon-quanping"></i>全屏	</span>					
					</div>
					<div class="modelBtn" v-show="zoom > 12">
						<div class="left gonggong" :class="{active: modelActive1}" @click="showPark(1)">
							<i class="iconfont icon-gonggong"></i>
							公共
						</div>	
						<div class="right shanghu" :class="{active: modelActive2}" @click="showPark(2)">
							<i class="iconfont icon-shanghu"></i>
							商业
						</div>	
					</div>
					<div style="position: absolute; top: 20px; left: 20px; width: 100px; border-radius: 2px; background-color: rgba(22,24,30,0.60); padding: 8px 12px; z-index: 100; color: #fff;">
							<div style="height: 20px; font-size: 12px;">{{(zoom > 12) ? '剩余车位' : '停车场数量'}}</div>
							
								<div style="margin-top: 2px; height: 20px; ">
									<div style="float: left; width: 10px; height: 10px; border-radius: 50%; border: 1px solid #fff; background: #E34C4C;"></div>
										<div style="float: left; margin-left: 5px; font-size: 12px;">50%以上</div>
								</div>
							
					
								<div style="margin-top: 2px; height: 20px; "> 
									<div style="float: left; width: 10px; height: 10px; border-radius: 50%; border: 1px solid #fff; background: #F7B422;"></div>
									<div style="float: left; margin-left: 5px; font-size: 12px;">20%~50%</div>
								</div>
								
							
								<div style="margin-top: 2px; height: 20px; ">
									<div style="float: left; width: 10px; height: 10px; border-radius: 50%; border: 1px solid #fff; background: #56BD5B;"></div>
									<div style="float: left; margin-left: 5px; font-size: 12px;">20%以下</div>
								</div>
								
							
						</div>
					
					<el-amap :vid="'amap-vue'" :map-manager="amapManager" :events="events">
						<el-amap-marker v-for="marker in cityMarkers" :position="marker.position" :events="marker.events" :content="marker.content" :visible="!(zoom > 12) && marker.visible"></el-amap-marker>
						<el-amap-info-window v-for="window in cityWindows" :position="window.position" :visible="!(zoom > 12) && window.visible" :content="window.content" :isCustom="true" :offset="[35, 120]"></el-amap-info-window>
						<el-amap-marker v-for="marker in parkMarkers" :position="marker.position" :events="marker.events" :content="marker.content" :icon="marker.icon" :visible="(zoom > 12) && marker.visible"></el-amap-marker>
						<el-amap-info-window v-for="window in parkWindows" :position="window.position" :visible="(zoom > 12) && window.visible" :content="window.content" :offset="[0, -30]"></el-amap-info-window>
					</el-amap>
				</div>							
			</div>
			<div class="overview wrapper">
				<div class="title">
					总概览
				</div>
				<el-row :gutter="20">
					<el-col :span="6">
						<div class="statisticsBox">
							<img src="./money.png" width="60" height="60">
							<div class="record right">
								<div class="record_count">
									324,532
								</div>
								<div class="record_title">
									今日营收金额
								</div>
							</div>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="statisticsBox">
							<img src="./money.png" width="60" height="60">
							<div class="record right">
								<div class="record_count">
									324,532
								</div>
								<div class="record_title">
									今日营收金额
								</div>
							</div>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="statisticsBox">
							<img src="./money.png" width="60" height="60">
							<div class="record right">
								<div class="record_count">
									324,532
								</div>
								<div class="record_title">
									今日营收金额
								</div>
							</div>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="statisticsBox">
							<img src="./money.png" width="60" height="60">
							<div class="record right">
								<div class="record_count">
									324,532
								</div>
								<div class="record_title">
									今日营收金额
								</div>
							</div>
						</div>
					</el-col>
				</el-row>
			</div>
			<div class="midCharts">			
				<el-row :gutter="20">
					<el-col :span="14">
						<div class="parktrend wrapper ">
							<div class="title">
								停车趋势
							</div>
							<ve-line :data="chartData" :settings="chartSettings" tooltip-visible legend-visible></ve-line>
						</div>
					</el-col>
	  			<el-col :span="10">
	  				<div class="parkrecord wrapper">
	  					<div class="title">
								停车记录分布
							</div>
	  					<ve-pie :data="chartData" :settings="chartSettings" tooltip-visible legend-visible></ve-pie>
	  				</div>
	  			</el-col>
				</el-row>
			</div>
			<div class="midCharts">			
				<el-row :gutter="20">
					<el-col :span="10">
						<div class="parktrend wrapper">
							<div class="title">
								实时收入统计
							</div>
							<div class="income">
								<div class="income_money">
									<img src="./income.png">
									658,720
								</div>
								<Income :incomeData="incomeData"></Income>
							</div>							
						</div>
					</el-col>
	  			<el-col :span="14">
	  				<div class="parkrecord wrapper">
	  					<div class="title">
								停车场实时收入TOP10
							</div>
	  					 <ve-histogram :data="chartData" :settings="chartSettings" tooltip-visible legend-visible></ve-histogram>
	  				</div>
	  			</el-col>
				</el-row>
			</div>		
		</div>
  </div>
</template>

<script>
import {
		getData
	} from '../../common/js/public.js'
import VueAMap from 'vue-amap'
import Income from '../../components/income/income'
let amapManager = new VueAMap.AMapManager();
export default {
		data () {
			return {
				zoom: 10,
				events: {
					init (o) {
						console.log(o);
					},
					zoomend () {
					}
				},
				amapManager,
				modelActive1: true,
				modelActive2: true,
				isFullScreen: false,
				totalPark: 0,
				mapParkList: [],
				mapCityList: [],
        cityMarkers: [],
        cityWindows: [],
        parkMarkers: [],
        parkWindows: [],
        incomeData: [
        	{
        		text: '桥西区',
        		percent: '20%',
        		color: '#EB61A5'
        	},
        	{
        		text: '桥西区',
        		percent: '30%',
        		color: '#EB61A5'
        	},
        	{
        		text: '桥西区',
        		percent: '40%',
        		color: '#EB61A5'
        	},
        	{
        		text: '桥西区',
        		percent: '50%',
        		color: '#EB61A5'
        	},
        	{
        		text: '桥西区',
        		percent: '50%',
        		color: '#EB61A5'
        	},
        	{
        		text: '桥西区',
        		percent: '50%',
        		color: '#EB61A5'
        	},
        	{
        		text: '桥西区',
        		percent: '50%',
        		color: '#EB61A5'
        	},
        	{
        		text: '桥西区',
        		percent: '50%',
        		color: '#EB61A5'
        	},
        	{
        		text: '桥西区',
        		percent: '50%',
        		color: '#EB61A5'
        	},
        	{
        		text: '桥西区',
        		percent: '50%',
        		color: '#EB61A5'
        	},
        	{
        		text: '桥西区',
        		percent: '50%',
        		color: '#EB61A5'
        	},
        	{
        		text: '桥西区',
        		percent: '50%',
        		color: '#EB61A5'
        	},
        	{
        		text: '桥西区',
        		percent: '50%',
        		color: '#EB61A5'
        	},
        	{
        		text: '桥西区',
        		percent: '50%',
        		color: '#EB61A5'
        	},
        	{
        		text: '桥西区',
        		percent: '50%',
        		color: '#EB61A5'
        	},
        	{
        		text: '桥西区',
        		percent: '50%',
        		color: '#EB61A5'
        	},
        	{
        		text: '桥西区',
        		percent: '50%',
        		color: '#EB61A5'
        	},
        	{
        		text: '桥西区',
        		percent: '50%',
        		color: '#EB61A5'
        	}
        ],
        colorList: ['#EB61A5', '#8D6CD1', '#56BD5B', '#F7B422', '#0099FA', '#E34C4C', '#29D1D7', '#7AD01B', '#8492A6']
			}
		},
		methods: {
			fullScreen () {					        
				let mapDom = this.$refs.map;
				if (!this.isFullScreen) {
					let requestMethod = mapDom.requestFullScreen || mapDom.webkitRequestFullScreen || mapDom.mozRequestFullScreen || mapDom.msRequestFullScreen;
					if (requestMethod) {
						requestMethod.call(mapDom);
						this.isFullScreen = true;
					} else {
						this.$alert('当前浏览器不支持全屏', '提示', {
							confirmButtonText: '确定'
						});
					}
				} else {
					let cancelMethod = document.exitFullscreen || document.mozCancelFullScreen || document.webkitCancelFullScreen;
					if (cancelMethod) {
						cancelMethod.call(document);
						this.isFullScreen = false;
					}
				}
			},
			getMapData () {				
				let opt = {
						url: '/gplus/map/querySjzPark',
						data: {},
						success: (res) => {
							this.mapCityList = res.data.cityVOList;
							this.mapParkList = res.data.ParkListVO;		
							this.totalPark = res.data.total;
							this.getMapDom();
						}
				};
				getData(opt);
			},
			showPark (type) {
				this['modelActive' + type] = !this['modelActive' + type];
				for (let i in this.parkMarkers) {
					if (this.parkMarkers[i].busiType == type) {
						this.parkMarkers[i].visible = !this.parkMarkers[i].visible;
					}
				}
				this.parkWindows.forEach((window) => {
					window.visible = false;
				})
			},
			getMapDom () {
				this.$nextTick(() => {
					let map = amapManager.getMap();
					map.setFitView();
					map.setZoom(12);
					/* global AMap */
					AMap.event.addListener(map, 'zoomend', () => {
			       this.zoom = map.getZoom();		       
			       console.log(this.zoom);
			    });
				});
			}		
		},
		watch: {
			mapCityList (list) {
				let windows = [];
				let self = this;
				let colorStr = '';
				let bgColorStr = "bg-red";
				let precent = 0;
				for (let i in list) {
					if (Number(list[i].totCount) == 0) {						
						precent = 0
					}	else {
						precent = Number(list[i].totCount) / Number(this.totalPark);
					}				
				// 颜色
			if (precent > 0.5) {
				bgColorStr = "bg-red";
				colorStr = "red";
			} else if (precent < 0.2) {
				bgColorStr = "bg-orange";
				colorStr = "orange";
			} else {
				bgColorStr = "bg-green";
				colorStr = "green";
			}
					let obj = {
						position: [list[i].lng, list[i].lat],
	          events: {
	            click: () => {
	              self.cityWindows.forEach(window => {
                  window.visible = false;
               });
                self.$nextTick(() => {
                  self.cityWindows[i].visible = true;
                });
	            }
	          },
	          visible: true,
	          content: `<div class="marker">
				          			<div style="text-align: center; width: 50%; font-size: 12px; color: #1F2D3D;" class="left">${list[i].cityName}</div> 
						          	<div style="text-align: center; width: 50%; font-size: 12px; color: #fff" class="right ${bgColorStr}">${list[i].totCount}</div> 
						          </div>`				
					};
					windows.push({
            position: [list[i].lng, list[i].lat],
            content: `<div class="cityWindow"> 
            						<div class="dot-top"></div>
					            	<div style="font-size: 14px; height: 35px; line-height: 35px; color: #1F2D3D; border-bottom: 1px solid #D3DCE6;"> ${list[i].cityName}车场总数 
					            	<span class="right" style="color: #000; font-size: 12px;"> <span class="${colorStr}">${list[i].totCount}</span> 个</span>
					            	</div>
					            	<div style="font-size: 12px; height: 30px; line-height: 30px; color: #5E6D82;">商业车场数
					            	<span class="right" style="color: #000; font-size: 12px;"> ${list[i].tenCount} 个</span>
					            	</div>
					            	<div style="font-size: 12px; height: 30px; line-height: 30px; color: #5E6D82;">公共车场数
					            	<span class="right" style="color: #000; font-size: 12px;"> ${list[i].pubCount} 个</span>
					            	</div>
					            </div>`,
            visible: false
          });
					this.cityMarkers.push(obj);
					this.cityWindows = windows;					
				}
			},
			mapParkList (list) {
				let windows = [];				
				let self = this;
				let colorStr = "";
				let precent = 0;
				let parkStatus = "";
				let iconImg = "../../../static/icon_map_green.png";			
				for (let i in list) {
					if (Number(list[i].totalSpace) == 0) {						
						precent = 0
					}	else {
						precent = Number(list[i].emptySpace) / Number(list[i].totalSpace);
					}				
				// 颜色
			if (precent > 0.5) {
				colorStr = "red";
				iconImg = "../../../static/icon_map_red.png";
			} else if (precent < 0.2) {
				colorStr = "orange";
				iconImg = "../../../static/icon_map_orange.png"
			} else {
				colorStr = "green";
				iconImg = "../../../static/icon_map_green.png"
			}
			// 施工状态
			if (list[i].parkStatus == 0) {
				parkStatus = "";
			} else if (list[i].parkStatus == 1) {
				parkStatus = "施工中";
				iconImg = "../../../static/icon_map_sg.png";
			} else if (list[i].parkStatus == 2) {
				parkStatus = "断网";
				iconImg = "../../../static/icon_map_dw.png";
			} else if (list[i].parkStatus == 3) {
				parkStatus = "断电";
				iconImg = "../../../static/icon_map_dd.png";
			}
					let obj = {
						position: [list[i].lng, list[i].lat],
	          events: {
	            click: () => {
	              self.parkWindows.forEach(window => {
                  window.visible = false;
               });
                self.$nextTick(() => {
                  self.parkWindows[i].visible = true;
                });
	            }
	          },
	          icon: iconImg,
						busiType: list[i].busiType,
						visible: true
					};					
					windows.push({
            position: [list[i].lng, list[i].lat],
            content: '<div style="width: 300px; padding: 10px 0;">' +
					'<img style="float: right;" src="' + list[i].image + '" width="115" height="80"  />' +
					'<div style="float: left;">' +
					'<h5 style="  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; width:130px;"><a href="parkDetail?parkId=' + list[i].parkId + '" title="' + list[i].cityName + '' + list[i].parkName + '">' + list[i].cityName + '' + list[i].parkName + '</a></h5>' +
					'<p style="width: 175px; max-height: 37px; overflow: hidden;overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-top: 10px;">' + list[i].address + '</p>' +
					'<p style="line-height: 14px; margin: 0px">' +
					'<p style="line-height: 14px; margin-top: 10px;">车位：<span class="' + colorStr + '">' + list[i].emptySpace + '</span>/' + list[i].totalSpace + '</p>' +
					'<p style="line-height: 14px; color: red; margin-top: 10px;">' + parkStatus + '</p>' +
					'</div>',
            visible: false
          });
					this.parkMarkers.push(obj);
					this.parkWindows = windows;
				}
			}
		},
		created () {	
			this.getMapData();
			this.chartData = {
				columns: ['日期', '销售额-1季度', '销售额-2季度', '占比', '其他'],
				rows: [{
					'日期': '1月1日',
					'销售额-1季度': 1523,
					'销售额-2季度': 1523,
					'占比': 0.12,
					'其他': 100
				}, {
					'日期': '1月2日',
					'销售额-1季度': 1223,
					'销售额-2季度': 1523,
					'占比': 0.345,
					'其他': 100
				}, {
					'日期': '1月3日',
					'销售额-1季度': 2123,
					'销售额-2季度': 1523,
					'占比': 0.7,
					'其他': 100
				}, {
					'日期': '1月4日',
					'销售额-1季度': 4123,
					'销售额-2季度': 1523,
					'占比': 0.31,
					'其他': 100
				}, {
					'日期': '1月5日',
					'销售额-1季度': 3123,
					'销售额-2季度': 1523,
					'占比': 0.12,
					'其他': 100
				}, {
					'日期': '1月6日',
					'销售额-1季度': 7123,
					'销售额-2季度': 1523,
					'占比': 0.65,
					'其他': 100
				}]
			}
			this.chartSettings = {
				dimension: ['日期'],
				metrics: ['销售额-1季度', '销售额-2季度', '占比'],
				axisSite: {
					right: ['占比']
				},
				yAxisType: ['KMB', 'percent'],
				yAxisName: ['销售额', '占比'],
				area: true,
				stack: {
					'销售额': ['销售额-1季度', '销售额-2季度']
				}
			}
		},
		mounted () {	
			this.incomeData.forEach((item, index) => {
				item.color = this.colorList[index];
			});
		},
		components: {
			Income
		}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" rel="stylesheet/stylus">
.marker
	width: 90px;
	height: 30px;
	line-height: 30px;
	border-radius: 15px 15px 15px 0;
	background: #fff;
	box-shadow: 0 0 2px 0 #99A9BF;
	overflow: hidden;
	font-size: 12px;
.cityWindow
	background: #FFFFFF;
	box-shadow: 0 0 2px 0 #99A9BF;
	width: 150px;
	padding: 0 10px 10px;
	position: relative;
/* 向上的箭头 */  
.dot-top
	&:before  
		content: '';  
		width: 0;  
		height: 0;  
		border: 10px solid transparent;  
		border-bottom-color: #99A9BF;  
		position: absolute;  
		left: 50%;  
		top: -20px;  
		margin-left: -10px; 
	&:after
		content: "";  
		width: 0;  
		height: 0;  
		border: 9px solid transparent;  
		border-bottom-color: #FFFFFF;  
		position: absolute;  
		left: 50%;  
		top: -18px;  
		margin-left: -9px;
</style>
<style scoped lang="stylus" rel="stylesheet/stylus">
.home
	.breadcrumb 
		height: 30px;
		overflow: hidden;	
	.content
		height: 100%;
		.wrapper
			height: 450px;
			background: #FFFFFF;
			border: 1px solid #C0CCDA;
			border-radius: 4px;
		.title
			font-size: 14px;
			color: #475669;
			padding-left: 17px;
			height: 30px;
			line-height: 30px;
		.mapWrapper
			width: 100%;
			height: 540px;
			height: calc(100% - 163px)
			position: relative;
			overflow: hidden;
			.modelBtn
				width: 140px;
				height: 41px;
				background: #FFFFFF;
				box-shadow: 0 0 4px 1px rgba(128,145,165,0.30);
				border-radius: 2px;				
				z-index: 999;	
				cursor: pointer;
				text-align: center;
				position: absolute;
				top: 14px;
				right: 140px;
				color: #5E6D82;
				.active
					color: #0099FA;
				.iconfont
					margin-right: 4px;
				.gonggong
					box-sizing: border-box;
					width: 50%;
					margin-top: 14px;
					border-right: 1px dashed #99A9BF;
				.shanghu
					width: 50%;
					margin-top: 14px;
			.fullScreen		
				width: 100px;
				height: 41px;
				position: absolute;
				top: 14px;
				right: 14px;
				box-shadow: 0 0 4px 1px rgba(128,145,165,0.30);
				border-radius: 2px;	
				font-size: 14px;
				color: #475669;	
				text-align: center;
				line-height: 41px;	
				background: #FFFFFF;
				z-index: 999;	
				cursor: pointer;
		.overview
			width: 100%;
			height: 127px;
			margin-top: 20px;
			.statisticsBox
				padding: 15px;
				.record
					text-align: right;
					.record_count
						font-size: 26px;
						color: #313541;
						height: 40px;
					.record_title
						font-size: 14px;
						color: #475669;
		.midCharts
			margin-top: 20px;
			height: 450px;		
			.income
				height: 100%;
				.income_money
					height: 100px;
					font-size: 38px;
					color: #475669;
					line-height: 100px;
					border-bottom: 1px solid #C0CCDA;
					img
						vertical-align: middle;					
						margin-left: 17px;
						margin-top: -12px;
						width: 36px;
						height: 36px;					
</style>
